<template>
  <div class="login">
    <!-- 顶部 -->
    <van-nav-bar right-text="首页" @click-right="gohome('Home')">
      <template #left>
        <div class="nav-left">
          <div class="logo">
            <img src="@/assets/images/home_active.png" alt="">
          </div>
        </div>
        <div class="logo-text">Luckin Coffee</div>
      </template>
    </van-nav-bar>
    <div class="user-box">
      <div class="welcome">欢迎回来！</div>
      <div class="welcome-en">Please login to your accounts</div>
      <!-- 填写手机号和密码 -->

      <div class="form-box">
        <!--  @submit="login" -->
        <van-form @submit="login">
          <van-cell-group inset>
            <van-field v-model="userInfo.phone" name="手机号" label="手机号" placeholder="手机号" :rules="rules.phone" />
            <van-field v-model="userInfo.password" :type="isRegisterPassword?'password':'text'" :right-icon="isRegisterPassword?'closed-eye':'eye-o'" name="密码" label="密码" placeholder="密码（6-16位）" :rules="rules.password" @click-right-icon="toggleRegisterPasswordType" />
          </van-cell-group>
          <!-- 忘记密码 -->
          <div class="forgetP " @click="jumpForgotpage">
            忘记密码?
          </div>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit" color="RGB(12, 52, 186)">
              登录
            </van-button>
          </div>
          <div style="margin: 16px;">
            <van-button round block native-type="submit" class="last-btn" @click="changeIsShow">
              注册
            </van-button>
          </div>
        </van-form>
      </div>
      <!-- 注册弹出框 -->
      <van-popup class="register-box" v-model="isShow" closeable position="bottom" close-icon="close">
        <div class="register-title">注册</div>
        <van-form @submit="register">

          <van-field v-model="userRegisterInfo.phone" name="手机号" label="手机号" placeholder="手机号" :rules="rules.phone" />
          <van-field v-model="userRegisterInfo.password" :type="isRegisterPassword?'password':'text'" :right-icon="isRegisterPassword?'closed-eye':'eye-o'" name="密码" label="密码" placeholder="密码（6-16位）" :rules="rules.password" @click-right-icon="toggleRegisterPasswordType" />
          <van-field v-model="userRegisterInfo.nickName" name="昵称" label="昵称" placeholder="昵称（1-10位）" :rules="rules.nickName" />

          <div style="margin: 16px; margin-top:42px;">
            <van-button round block type="primary" native-type="submit" color="RGB(12, 52, 186)">
              注册
            </van-button>
          </div>

        </van-form>
      </van-popup>

    </div>

  </div>
</template>

<script>
import '@/assets/less/login.less'
import request from '@/utils/reques'
import qs from 'qs'
export default {
  name: 'Login',
  data() {
    return {
      // 用户登录信息
      userInfo: {
        phone: '',
        password: ''
      },
      // 用户注册信息
      userRegisterInfo: {
        phone: '',
        password: '',
        nickName: ''
      },
      // 注册信息的开关
      isShow: false,
      // 表单的校验规则对象
      rules: {
        // 手机号的校验规则
        phone: [{ required: true, message: '手机号格式不正确', trigger: 'onBlur', pattern: /^1\d{10}$/ }],
        // 密码的校验规则
        password: [{ required: true, message: '密码支持数字字母下划线组合，且必须以字母开头，6-16位', trigger: 'onBlur', pattern: /^[A-za-z]\w{5,15}$/ }],
        // 昵称的校验规则 pattern: /^\w\u4e00-\u9fa5{1,10}$/
        nickName: [{ required: true, message: '昵称可以由字母、数字、下划线、汉字组成（1-10字符）', trigger: 'onBlur', pattern: /^.{1,10}$/ }]
      },
      isRegisterPassword: true
    }
  },
  methods: {
    jumpForgotpage() {
      this.$router.push({ name: 'Forgot' })
    },
    gohome(home) {
      this.$router.push({ name: home })
    },

    async login() {
      // 只有表单验证通过才会调用这个方法
      // 发起登录的请求,把用户的登录信息传回接口 qs.stringify(data)序列化参数
      const { data: res } = await request.post('/login', qs.stringify({ appkey: this.appkey, phone: this.userInfo.phone, password: this.userInfo.password }))
      // 打印res
      // console.log(res)
      if (res.code == 202) {
        this.$toast.loading({
          message: res.msg,
          forbidClick: true
        })
      } else {
        // 把token值存入 localStorage
        localStorage.setItem('token', res.token)
        this.$router.push({ path: '/main/home', name: 'Home' })
      }
      this.$toast.clear()
    },
    async register() {
      // 注册方法
      this.$toast.loading({
        message: '注册中...',
        forbidClick: true
      })
      try {
        const { data: res } = await request.post('/register', qs.stringify({ appkey: this.appkey, nickName: this.userRegisterInfo.nickName, password: this.userRegisterInfo.password, phone: this.userRegisterInfo.phone }))
        console.log(res)
        if (res.code == 100) {
          this.isShow = false
        } else if ((res.code = 102)) {
          this.$toast(res.msg)
        }
      } catch (error) {
        this.$toast.clear()
      }
    },
    changeIsShow() {
      this.isShow = !this.isShow
    },
    toggleRegisterPasswordType() {
      this.isRegisterPassword = !this.isRegisterPassword
    }
  }
}
</script>